<template>
    <div class="user-add">
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="用户名" style="width:50%">
                <el-input 
                v-model="form.userName" 
                placeholder="用户名" 
                clearable 
                ></el-input>
            </el-form-item>
            <el-form-item label="手机号" style="width:50%" >
                <el-input v-model="form.userPhone" placeholder="手机号" clearable ></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-radio-group v-model="form.sex">
                    <el-radio label="男">男</el-radio>
                    <el-radio label="女">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item>
                <el-button @click="back" icon="el-icon-back">返回</el-button>
                <el-button type="primary"  @click="userEdit"  icon="el-icon-edit">修改</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            id:0,
            form:{
                userName:'',
                userPhone:'',
                sex:'男'
            }
        }
    },
    created() {
        let tab=[{name:'用户列表',path:'user'},{name:'编辑用户',path:'userEdit'}];
        //this.$store.commit('_setTab',tab);
        if(this.$route.query.id) {
            this.id = this.$route.query.id, this.getUserInfo();
        }
    },
    methods:{
        getUserInfo() {
            let _this = this;
            _this.$api.get('user/userInfo',{
                id: this.id
            },function(ret) {
                _this.form=ret.data
            });
        },
        userEdit() {
            let _this = this;
            _this.$api.post('user/userEdit',{
                userName:this.form.userName,
                userPhone:this.form.userPhone,
                sex:this.form.sex,
                id:this.id
            },function(ret) {
                _this.$message({
                    type:'success',
                    message:'修改成功'
                });
            });
        },
        back() {
            this.$router.go(-1);
        }
    }
}
</script>

<style lang="scss" scoped>
    .user-add{
        margin-top: 40px;

    }
</style>
